<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisibleBzs"
    width="950px"
    height="100%"
    :before-close="handleCloseBzs"
  >
    <el-table
      stripe
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="date" label="区划" sortable width="150" />
      <el-table-column prop="name" label="单位名称" sortable width="350" />
      <el-table-column prop="bz_type" label="编制类型" sortable width="200" />
      <el-table-column prop="bz_num" label="编制数" sortable width="200" />
    </el-table>
    <el-pagination
      style="float:right"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="handleClose3">取 消</el-button>
      <el-button type="primary" @click="handleClose3">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisibleBzs: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          date: '南宁市',
          name: '中国共产党南宁市委员会机构编制委员会办公室',
          bz_type: '党政群机关行政编制',
          bz_num: '112'
        },
        {
          date: '南宁市',
          name: '中国共产党南宁市委员会组织部',
          bz_type: '党政群机关行政编制',
          bz_num: '205'
        },
        {
          date: '南宁市',
          name: '中国共产党南宁市委员会宣传部',
          bz_type: '党政群机关行政编制',
          bz_num: '105'
        },
        {
          date: '南宁市',
          name: '中国共产党南宁市教育局',
          bz_type: '党政群机关行政编制',
          bz_num: '23'
        },
        {
          date: '南宁市',
          name: '中国共产党南宁公安局',
          bz_type: '公安专项编制',
          bz_num: '64'
        },
        {
          date: '南宁市',
          name: '中国共产党南宁市法院',
          bz_type: '法院专项编制',
          bz_num: '207'
        }
      ]
    }
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    handleCloseBzs() {
      this.$emit('handleCloseBzs')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
